<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Bootstrap-ecommerce by Vosidiy">

    <title>主页</title>

    <link rel="/shortcut icon" type="image/x-icon" href="/images/favicon.ico">

    <!-- jQuery -->
    <script src="/js/jquery-2.0.0.min.js" type="text/javascript"></script>

    <!-- Bootstrap4 files-->
    <script src="/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- Font awesome 5 -->
    <link href="/fonts/fontawesome/css/fontawesome-all.min.css" type="text/css" rel="stylesheet">

    <!-- plugin: fancybox  -->
    <script src="/plugins/fancybox/fancybox.min.js" type="text/javascript"></script>
    <link href="/plugins/fancybox/fancybox.min.css" type="text/css" rel="stylesheet">

    <!-- custom style -->
    <link href="/css/ui.css" rel="stylesheet" type="text/css"/>
    <link href="/css/responsive.css" rel="stylesheet" media="only screen and (max-width: 1200px)" />

    <!-- custom javascript -->
    <script src="/js/script.js" type="text/javascript"></script>

    <script type="text/javascript">
        /// some script

        // jquery ready start
        $(document).ready(function() {
            // jQuery code

        });
        // jquery end
    </script>

</head>
<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#"> <img class="logo" src="/images/logo-white.png"> LOGO</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar1">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="http://bootstrap-ecommerce.com">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item"><a class="nav-link" href="html-components.html"> Documentation </a></li>
            <li class="nav-item dropdown">
                <a class="nav-link  dropdown-toggle" href="#" data-toggle="dropdown">  Dropdown  </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#"> Menu item 1</a></li>
                    <li><a class="dropdown-item" href="#"> Menu item 2 </a></li>
                </ul>
            </li>
            <li class="nav-item">
                <a class="btn ml-2 btn-warning" href="http://bootstrap-ecommerce.com">Download</a></li>
        </ul>
    </div>
</nav>

<!-- ========================= SECTION INTRO ========================= -->
<section class="section-intro bg-secondary text-white text-center">
    <div class="container d-flex flex-column"  style="min-height:80vh;">

        <div class="row mt-auto">
            <div class="col-lg-8 col-sm-12 text-center mx-auto">
                <h1 class="display-4 mb-3">—— 速订 —— </h1>
                <p class="lead mb-5">我们是个酒店辅助订购系统，专为您快速订购酒店，便捷出行</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-9 col-md-8 col-sm-12 mx-auto text-center">
                <form class="form-noborder" method="post" action="/HTML/search">
                    <div class="form-row mb-5">
                        <div class="col-lg-6 col-sm-12 form-group">
                            <input class="form-control form-control-lg" placeholder="请输入您要查询的文字" type="text" name="keyword">
                        </div>
                        <div class="col-lg-3 col-sm-12 form-group">
                            <select class="custom-select form-control-lg">
                                <option id="keywordOption"> 关键词搜索 </option>
                                <option id="conditionOption"> 条件搜索 </option>
                                <option id="locationOpiton"> 附近搜索 </option>
                                <option> Category name </option>
                            </select>
                        </div>
                        <div class="col-lg-3 col-sm-12 form-group">
                            <button class="btn btn-warning btn-block btn-lg" type="submit" id="basic-account">搜索</button>
                        </div>
                    </div>
                </form>
                <p class="small">关键词搜索可用于查找地标、景点、酒店关键字</p>
                <p class="small">附近搜索会展示当前位置某公里内酒店</p>
                <p class="small">过滤搜索能过滤位置、价格、评分、星级、品牌、设施</p>
                <!--下面的图标-->
                <ul class="list-inline my-5">
                    <li class="list-inline-item">
                        <a class="h4 text-light p-2" href="#">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a class="h4 text-light p-2" href="#">
                            <i class="fab fa-facebook"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a class="h4 text-light p-2" href="#">
                            <i class="fab fa-dribbble"></i>
                        </a>
                    </li>
                    <li class="list-inline-item">
                        <a class="h4 text-light p-2" href="#">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </li>
                </ul>
            </div> <!-- col.// -->
        </div> <!-- row.// -->

    </div>
</section>
<!-- ========================= SECTION INTRO END// ========================= -->


<section class="section-content padding-y">
    <div class="container">

        <header class="section-heading">
            <h2>主页使用说明</h2>
        </header><!-- sect-heading -->

        <article>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


        </article>

    </div> <!-- container .//  -->
</section>
<!-- ========================= SECTION CONTENT END// ========================= -->

<!-- ========================= FOOTER ========================= -->
<footer class="section-footer bg-dark white">
    <div class="container">
        <section class="footer-bottom row">
            <div class="col-sm-6">
                <p> 四川大学实训项目 <br>  第六组作品</p>
            </div>
            <div class="col-sm-6">
                <p class="text-sm-right">
                    2019·7·8 <br>
                    中国·成都
                    <!--<a href="http://bootstrap-ecommerce.com">Bootstrap-ecommerce UI kit</a>-->
                </p>
            </div>
        </section> <!-- //footer-top -->
    </div><!-- //container -->
</footer>
<!-- ========================= FOOTER END // ========================= -->

</body>
</html>